
import XMarkIcon from "@heroicons/react/16/solid/XMarkIcon";
import PlusIcon from "@heroicons/react/16/solid/PlusIcon";
import { useState, useEffect } from "react";


const MajorItem = ({major,onMajorDelete, onMajorItemAdd,printMode }) => {

    const [currentPrintMode, setCurrentPrintMode] = useState(printMode)
    useEffect(() => {
        setCurrentPrintMode(printMode)
    }, [printMode])

    return (
        <div className="flex flex-col  rounded-md shadow-lg text-xs p-2 min-w-40 min-h-40 hover:bg-base-300">
           {major.majorName !== '' ? <>

                <div className="flex flex-col px-2 relative w-40 h-40 overflow-x-hidden overflow-y-auto" title={major.majorName}>
                    {!currentPrintMode && <div className="absolute -top-1 -right-1">
                        <XMarkIcon className="w-8 h-8 text-red-500 cursor-pointer hover:text-orange-300" onClick={onMajorDelete}/>
                    </div> }
                    <div className="flex flex-row items-center justify-center mt-6">
                        <div className="text-sm font-semibold">{major.majorName}</div>
                    </div>
                    <div className="flex flex-row items-top justify-between mt-1">
                        <div className=" text-xs font-semibold">批次:</div>
                        <div className="flex-1 text-xs  text-left mx-1">{major.batch}</div>
                    </div>
                    <div className="flex flex-row items-top justify-between">
                        <div className="text-xs font-semibold">限选:</div>
                        <div className="flex-1 text-xs  text-left mx-1">{major.subjectRequire}</div>
                    </div>
                    <div className="flex flex-row items-top justify-between">
                        <div className=" text-xs font-semibold">分数:</div>
                        <div className="flex-1 text-xs text-left mx-1">{major.score}</div>
                    </div>
                    <div className="flex flex-row items-top justify-between">
                        <div className=" text-xs font-semibold">位次:</div>
                        <div className="flex-1 text-xs  text-left mx-1">{major.rank}</div>
                    </div>
                </div>
            </> : 
            <>
            <div className="flex w-40 h-40 items-center justify-center" onClick={onMajorItemAdd} >
            {!currentPrintMode &&    <PlusIcon className="w-12 h-12 text-red-500  cursor-pointer hover:text-orange-300" /> }
            </div>
            </> }
        </div>
    )
}

export default MajorItem;